import React, { memo, useEffect, useState } from "react";
import { Outlet } from "react-router-dom";
import { NavBar } from "antd-mobile";
import { useHandleBeforeHome } from "@/router/routerBefore";
import store from "@/store";
import NavLinkBar from "../NavLinkBar";
import DashWrapper from "./style";

const list = [
  {
    path: "/boss",
    title: "boss列表",
    hide: false,
  },
  {
    path: "/seeker",
    title: "求职者列表",
    hide: true,
  },
  {
    path: "/msg",
    title: "消息列表",
    badge: 0,
  },
  {
    path: "/user",
    title: "我的",
  },
];

const DashBoard = memo((props) => {
  useHandleBeforeHome();
  let [navList, setNavList] = useState(list);

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      const user = store.getState().user;
      const chat = store.getState().chat;
      let nav = [...navList];
      if (user.type === "boss") {
        nav[1].hide = false;
        nav[0].hide = true;
      }
      if (user.type === "seeker") {
        nav[0].hide = false;
        nav[1].hide = true;
      }
      nav[2].badge = chat.unread;
      if (nav[2].badge == 0) {
        delete nav[2].badge;
      }
      setNavList(nav);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  // 官网示例  https://mobile.ant.design/zh/components/tab-bar
  return (
    <DashWrapper>
      <NavBar
        mode="dark"
        back={null}
        style={{ backgroundColor: "#108ee9", color: "white" }}
      >
        {props.routeMeta.title}
      </NavBar>
      <div className="main">
        <Outlet></Outlet>
      </div>

      <div className="navLinkBarCon">
        <NavLinkBar list={navList}></NavLinkBar>
      </div>
    </DashWrapper>
  );
});

DashBoard.propTypes = {};

export default DashBoard;
